<template>
  <f7-page class="center-body3">
    <!-- 头部 -->
    <div class="header-f7">
      <f7-link
        back
        icon-material="chevron_left"
        class="f7-link"
        color="white"
      ></f7-link>
    </div>
    <f7-block class="header">
      <!-- 设置和消息图 -->
      <f7-row class="svg">
        <img src="static/img/center/index3/set-up.svg" alt="" class="my-svg" />
        <f7-nav-title class="img-svg">
          <img
            src="static/img/center/index3/my-news.svg"
            alt=""
            class="my-svg"
          />
          <f7-block-title class="news">99</f7-block-title>
        </f7-nav-title>
      </f7-row>

      <!-- 个人头像 -->
      <f7-block class="my-name">
        <img src="static/img/center/man-png.png" alt="" class="portrait" />
        <f7-col class="my-name2">
          <f7-nav-title class="name">热乾面</f7-nav-title>
          <f7-col class="sign">
            <f7-chip text="v0会员" class="qm-chip"></f7-chip>
            <f7-chip text="我的权限＞" class="qm-chip"></f7-chip>
          </f7-col>
        </f7-col>
      </f7-block>
      <!-- 第一个框 -->
      <f7-card class="header-bag">
        <div class="qm-entry">
          <qm-entry
            v-for="(item, index) in news"
            :key="index"
            :data="item"
            iconWidth="88"
          ></qm-entry>
        </div>
      </f7-card>
      <!-- 安全检测详情 -->
      <f7-card class="header-bag">
        <f7-list class="f7-list">
          <f7-list-item link="#" title="安全专项详情" class="qm-item-title">
          </f7-list-item>
        </f7-list>
        <ul class="header-ul">
          <li>
            <div class="header-title">234</div>
            风险清单
          </li>
          <li>
            <div class="header-title">26</div>
            伟大工程
          </li>
          <li>
            <div class="header-title">100</div>
            起重设备
          </li>
          <li>
            <div class="header-title">0</div>
            临时检查
          </li>
        </ul>
        <ul class="header-ul">
          <li>
            <div class="header-title">3</div>
            隐患排查
          </li>
          <li>
            <div class="header-title">8</div>
            安全会议
          </li>
          <li>
            <div class="header-title">28</div>
            临时检查
          </li>
          <li>
            <div class="header-title">0</div>
            监理周报
          </li>
        </ul>
      </f7-card>
      <!-- 常用功能 -->
      <f7-card class="header-bag">
        <qm-block title="常用功能" :needpadding="false">
          <div class="qm-entry2">
            <qm-entry
              v-for="(item, index) in list"
              :key="index"
              :data="item"
              iconWidth="48"
              class="qm-flex"
            ></qm-entry>
          </div>
        </qm-block>
      </f7-card>
      <div style="width: 100%; height: 60px"></div>
    </f7-block>
    <!-- 底部导航栏 -->
    <f7-viewbar-instince slot="fixed" ></f7-viewbar-instince>
  </f7-page>
</template>

<script>
export default {
  data() {
    return {
      title: "myself",
      news: [
        {
          image: "static/img/center/index2/icon_me1.svg",
          title: "发消息",
        },
        {
          image: "static/img/center/index2/icon_me2.svg",
          title: "打电话",
        },
        {
          image: "static/img/center/index2/my-email.svg",
          title: "发邮件",
        },
      ],
      list: [
        {
          image: "static/img/center/index3/icon-me-shoucang.svg",
          title: "收藏",
          href: "/ui/center/index4",
        },
        {
          image: "static/img/center/index3/icon-me-daiban.svg",
          title: "待办事项",
          href: "/ui/center/index4",
        },
        {
          image: "static/img/center/index3/icon-me-xiaoxi.svg",
          title: "我的消息",
          href: "/ui/center/index3",
        },
        {
          image: "static/img/center/index3/icon-me-wuye.svg",
          title: "物业管理",
          href: "/ui/center/index3",
        },
        {
          image: "static/img/center/index3/icon-me-shouji.svg",
          title: "绑定手机",
          href: "/ui/center/index3",
        },
        {
          image: "static/img/center/index3/icon-me-shezhi.svg",
          title: "设置",
          href: "/ui/center/index3",
        },
        {
          image: "static/img/center/index3/icon-me-mima.svg",
          title: "修改密码",
          href: "/ui/center/index3",
        },
        {
          image: "static/img/center/index3/icon-me-dizhi.svg",
          title: "地址管理",
          href: "/ui/center/index3",
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.center-body3 {
  background-color: var(--color-fill-background);
  width: 100%;
  height: 100%;
  position: relative;
  .header-f7 {
    position: absolute;
    top: 2%;
    left: 5%;
    z-index: 3;
  }
  .header {
    margin: 0px;
    background: url("../../../../static//img/center/index3/bg_me2.png") no-repeat;
    background-size: 100% 100%;
    background-attachment: local;
    width: 100%;
    height: calc(376px * var(--ratio));
    padding: 0px;

    .svg {
      display: flex;
      justify-content: flex-end;
      padding-top: calc(22px * var(--ratio));

      .img-svg {
        position: relative;

        .news {
          position: absolute;
          width: 16px;
          height: 16px;
          background-color: var(--color-fill-grey-inverse);
          color: var(--color-brand);
          border-radius: 50%;
          top: -6px;
          right: 7px;
          font-size: 0.1px;
          text-align: center;
          line-height: 16.5px;
          margin: 0px;
        }
      }

      .my-svg {
        width: 20px;
        height: 20px;
        margin-right: calc(40px * var(--ratio));
        color: var(--color-fill-grey-inverse);
      }
    }

    .my-name {
      display: flex;
      margin: 0px 0px calc(41px * var(--ratio)) 0px;
      padding: 0px;

      .portrait {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        margin-left: calc(48px * var(--ratio));
      }

      .my-name2 {
        margin-left: calc(22px * var(--ratio));

        .name {
          font-size: calc(44px * var(--ratio));
          color: var(--color-text-base);
        }

        .sign {
          display: flex;
          font-size: var(--font-size-subcontent-2);
          margin: 0px;
          padding: 0px;

          .qm-chip {
            --f7-chip-height: 18px;
            --f7-chip-font-size: 12px;
            --f7-chip-padding-horizontal: 9px;
            background-color: #0000001a;
            color: #ffffffce;
            margin: 0px 2px;
          }
        }
      }
    }

    .header-bag {
      margin: 0px 14px 9px;
      background-color: var(--color-fill-grey-inverse);
      border-radius: 7px;
      box-shadow: none;
      .qm-item-title {
        /deep/  .item-title {
            font-size: var(--font-size-subtitle);
            font-weight: 600;
          }
        /deep/ .item-inner {
        &::before {
          content: "";
          margin-top: 0;
          width: 12px;
          height: 18px;
          background-image: url("../../../../static/img/list/right-arrow.svg");
          background-repeat: no-repeat;
          background-size: contain;
          transform: translate(0, -50%);
        }
      }
      }
      .qm-entry {
        padding: calc(32px * var(--ratio)) 0px;
        display: grid;
        grid-template-columns: repeat(3, 33%);
        grid-row-gap: 32px;
      }
      .qm-entry2 {
        // padding :calc(32px * var(--ratio)) 0px;
        display: grid;
        grid-template-columns: repeat(4, 25%);
        grid-row-gap: calc(36px * var(--ratio));
        justify-content: space-between;
        .qm-flex {
          flex: 0 0 25%;
        }
      }
      .f7-list {
        --f7-list-border-color: #ffffff;
        --f7-list-item-title-font-weight: 600;
        --f7-list-margin-vertical: 0px;
        --f7-list-item-padding-vertical: calc(32px * var(--ratio));
        --f7-list-item-title-font-size: calc(32px * var(--ratio));

        ul {
          border-radius: 7px;
        }
      }

      .header-ul {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        text-align: center;
        font-size: var(--font-size-subcontent-2);
        color: var(--color-text-subtext);
        padding-bottom: calc(51px * var(--ratio));

        .header-title {
          font-size: var(--font-size-maintitle);
          margin-bottom: 3px;
          font-weight: 600;
          color: var(--color-text-title);
          line-height: 19px;
        }
      }

      .common-functions {
        font-size: var(--font-size-subtitle);
        line-height: 19px;
        color: var(--color-text-title);
        padding: 16px 0px 17px 14px;
        font-weight: 600;
      }

      .third-ul {
        ul {
          display: flex;
          justify-content: space-around;
          text-align: center;
          flex-flow: row wrap;

          li {
            flex: 0 0 25%;
            margin-bottom: calc(36px * var(--ratio));
            font-size: var(--font-size-subcontent-2);

            img {
              width: 21px;
              height: 21px;
            }
          }
        }
      }
    }
  }

  .footer::after {
    background: var();
    box-shadow: 4px -1px 12px 3px #0000000a;
  }
}
</style>
